<template>
  <header
      class="group flex w-full items-center fixed left-0 top-0 h-[50px] px-[15px] text-[15px] text-white justify-between z-[1000]"
      :class="{'active bg-primary':headerScroll}">
    <router-link to="'/category'">
      <i class="nbicon nbmenu2 text-primary group-[.active]:text-white"/>
    </router-link>
    <div class="w-3/4 flex items-center  leading-[20px] my-[10px] py-[5px] bg-white/70 rounded-[20px]">
      <span class="app-name px-[10px] text-primary text-[20px] font-bold border-r border-r-black">新蜂商城</span>
      <router-link to="/search?from=home" custom v-slot="{ navigate }">
        <span role="link" class="text-[12px] text-black h-[20px] leading-[20px] flex-1 px-[10px]"
              @click="navigate">山河无恙，人间皆安</span>
      </router-link>
    </div>
    <router-link v-if="!isLogin" to="/login" custom v-slot="{ navigate }">
      <span role="link" class="text-primary group-[.active]:text-white" @click="navigate">登录</span>
    </router-link>
    <router-link v-else to="/user" custom v-slot="{ navigate }">
      <span role="link" class="text-primary" @click="navigate">
        <van-icon name="manager-o text-primary group-[.active]:text-white"/>
      </span>
    </router-link>
  </header>
</template>


<script setup lang="ts">
import {computed, ref, watch} from "vue";
import useToken from "@/hooks/useToken";
import {useWindowScroll} from '@vueuse/core'

const {token} = useToken();
const {y} = useWindowScroll()

const isLogin = computed(() => !!token.value);

const headerScroll = ref(false);

watch(() => y.value, (value) => {
  headerScroll.value = value > 100
})
</script>
